<template>
    <div>
        <!-- 内容 -->
        <div class="content">
            <div class="titleClass" style="margin-top: 20px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                人员管理
            </div>
            <div class="contentClass">
                <div style="width: 30%;">
                    <div style="display:flex;">
                        <img style="margin-left:6px;width: 40px;height: 35px;"
                            src="../../../assets/images/data/Union.png">
                        <span
                            style="color:#E4F3FF;font-size:16px;position: relative;top:6px;width:68px;text-align:right">{{
                                totalEnter }}</span>
                    </div>
                    <img style="margin-top:2px;" src="../../../assets/images/data/编组 10.png" alt="">
                    <span style="color:#E4F3FF;font-size:13px;margin-left:6px">累计进场总人数</span>
                </div>
                <div style="width: 30%;">
                    <div style="display:flex;">
                        <img style="margin-left:6px;width: 26px;height: 35px;"
                            src="../../../assets/images/data/noun-staff-4199815.png">
                        <span
                            style="color:#E4F3FF;font-size:16px;position: relative;top:6px;width:68px;text-align:right">{{
                                todayEnter }}</span>
                    </div>
                    <img style="margin-top:2px;" src="../../../assets/images/data/编组 10.png" alt="">
                    <span style="color:#E4F3FF;font-size:13px;margin-left:6px">当日进场人数</span>
                </div>
                <div style="width: 30%;">
                    <div style="display:flex;">
                        <img style="margin-left:6px;width: 30px;height: 35px;" src="../../../assets/images/data/形状.png">
                        <span
                            style="color:#E4F3FF;font-size:16px;position: relative;top:6px;width:68px;text-align:right">{{
                                nowAtten }}</span>
                    </div>
                    <img style="margin-top:2px" src="../../../assets/images/data/编组 10.png" alt="">
                    <span style="color:#E4F3FF;font-size:13px;margin-left:6px">实时在场人数</span>
                </div>
            </div>
            <div class="titleClass" style="margin-top: 20px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                分包管理
            </div>
            <div class="contentClass">
                <div class="flrow">
                    <img style="width: 52px;height: 58px;" src="../../../assets//images/data/Group 1000004817.png">
                    <div style="margin-right: 0px;width: 65%;">
                        <div class="flrowName2">
                            <span style="margin-top: 0px;">计划分包数量</span>
                        </div>
                        <div class="flrowName1">
                            <img style="width: 100%;height:40px;" src="../../../assets/images/data/图层 603 拷贝 灰大素材 1.png"
                                alt="">
                            <span class="span1">{{ subpackagelist.plannum }}</span>
                        </div>
                    </div>
                </div>
                <div class="flrow">
                    <img style="width: 52px;height: 58px;" src="../../../assets//images/data/Group 1000004817.png">
                    <div style="margin-right: 0px;width: 65%;">
                        <div class="flrowName2">
                            <span style="margin-top: 0px;">实际分包进场数量</span>
                        </div>
                        <div class="flrowName1">
                            <img style="width: 100%;height:40px;" src="../../../assets/images/data/图层 603 拷贝 灰大素材 1.png"
                                alt="">
                            <span class="span1">{{ subpackagelist.realitynum }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="titleClass" style="margin-top: 20px;">
                <img style="margin:9px 12px 10px 11px;width:17px;height: 17px;" src="../../../assets/images/矩形装饰.png">
                安全教育
            </div>
            <div class="contentClass">
                <div class="flrow" style="position: relative;">
                    <img style="width: 86px;height: 70px;" src="../../../assets//images/data/色相_饱和度 6 灰大素材 1.png">
                    <div class="felxClass" style="margin-right: 0px;width: 65%;">
                        <span>已进行安全教育</span>
                        <span style="color: #41eac4;font-size: 16px;margin-top: 6px;">{{ educationlist.eduCount
                            }}</span>
                    </div>
                </div>
                <div class="flrow" style="position: relative;">
                    <img style="width: 86px;height: 70px;" src="../../../assets//images/data/色相_饱和度 6 灰大素材 1.png">
                    <div class="felxClass" style="margin-right: 0px;width: 65%;">
                        <span>未进行安全教育</span>
                        <span style="color: #f2b55a;font-size: 16px;margin-top: 6px;">{{ educationlist.noEduCount
                            }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { useAppStore } from "../../../store";
import { LabourManage, SubpackageManage, LabourInfos } from "@/api";
export default defineComponent({
    name: 'UserRegulate',
    setup() {
        const { userInfo, projectList, projectInfo, setProjectInfo } = useAppStore()

        const Attendance = ref([])
        const totalEnter = ref("")
        const todayEnter = ref("")
        const nowAtten = ref("")
        const subpackagelist = ref({})
        const educationlist = ref({})
        //获取出勤概况数据
        const GetLabourManage_FB = async () => {
            const { data } = await LabourManage({ projectId: projectInfo.id })
            totalEnter.value = data.totalEnter;
            todayEnter.value = data.todayEnter;
            nowAtten.value = data.nowAtten;
            Attendance.value = data.groupdata
        }
        // 分包管理
        const GetSubpackageManage_FB = async () => {
            const { data } = await SubpackageManage({ projectId: projectInfo.id })
            subpackagelist.value = data;
        }
        // 人员档案
        const GetLabourInfos_FB = async () => {
            const { data } = await LabourInfos({ projectId: projectInfo.id })
            //安全教育
            educationlist.value = data.safeEdu
        }
        onMounted(() => {
            GetLabourManage_FB()
            GetSubpackageManage_FB()
            GetLabourInfos_FB()
        });


        return {
            Attendance,
            totalEnter,
            todayEnter,
            nowAtten,
            subpackagelist,
            educationlist,
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    display: flex;
    align-items: center;
    background: url('../../../assets/images/Group9436.png') no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    display: flex;
    justify-content: space-around;
    padding: 28px 0px;
    background-color: rgba(33, 46, 90, 0.5);
}

.flrow {
    display: flex;
    width: 50%;
    justify-content: flex-start;
    align-items: center;

    .flrowName2 {
        display: flex;
        flex-direction: column;
        text-align: center;
        height: 46px;
        justify-content: center;
        font-size: 24px;
        background-image: url('../../../assets/images/data/Group1000004816.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .flrowName1 {
        display: flex;
        flex-direction: column;
        text-align: center;
        position: relative;
        height: 80px;

        .span1 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            // margin-top: -80px;
            font-size: 52px;
            background-image: linear-gradient(to right, #43a5ff, #fff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 600;
        }
    }
}

.felxClass {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(0%, -20%);
    height: 100%;
    width: 100%;
    // align-items: flex-end;
}
</style>